<div class="card card-default gutter-b  card-outline">
    <div class="card-header align-items-center border-0">
        <h3 class="card-title align-items-start " >
            <div class="input-group">
                <input type="text" style="width:180px;" [placeholder]="l('SearchWithThreeDot')" class="form-control" id="search" autocomplete="off" 
                  (keydown.enter)="$event.preventDefault()" (input)="_filter($event.target.value)" />
                <div class="input-group-append">
                <div class="input-group-text" style="background-color: #fff;"><i class="icon-magnifier"></i></div>
                </div>
            </div>
        </h3>
        <div class="card-tools">
            <button 
                (click)="expandAll()" title='{{"OpenAll" | localize}}' class="btn blue btn-circle btn-outline mr-1">
                <i class="fa fa-folder-open"></i> 
            </button>
            <button  
                (click)="collapseAll()"  title='{{"CloseAll" | localize}}' class="btn blue btn-circle btn-outline mr-1">
                <i class="fa fa-folder"></i>
            </button>
            <button *ngIf="'Pages.Tenant.Menus.Create' | permission" 
                (click)="addRootMenu()" class="btn blue btn-circle btn-outline">
                <i class="fa bi-plus-lg"></i> {{"AddRootMenuItem" | localize}}
            </button>
           
        </div>
    </div>
    <div class="card-body">
        <p-tree #ptree [hidden]="!totalUnitCount" [value]="treeData" 
                selectionMode="single"
                [(selection)]="selectedOu"
                (onNodeSelect)="nodeSelect($event)"
                (onNodeDrop)="nodeDrop($event)"
                [contextMenu]="ouContextMenu"
                [draggableNodes]="canMoveMenuItem" [droppableNodes]="canMoveMenuItem">
            <ng-template let-node pTemplate="default">
                <div>
                    <span>
                        {{node.label}}
                    </span>
                    
                </div>
            </ng-template>
        </p-tree>
        <p-contextMenu #ouContextMenu [model]="ouContextMenuItems" appendTo="body" baseZIndex="99999"></p-contextMenu>
        <div *ngIf="!totalUnitCount" class="text-muted">
            {{"NoMenuDefinedYet" | localize}}
        </div>
    </div>
</div>

<editSortNumModal #editSortNumModal (menuUpdated)="menuUpdated($event)" ></editSortNumModal>
<menu-config-modal #menuConfigModal ></menu-config-modal>


